<template>
    <div class="erp-image-wrap" v-loading="loading || tranlataLoading">
        <template v-if="!noData">
            <!-- <img :src="urlSrc" class="erp-image" /> -->
            <el-image :src="urlSrc" class="erp-image"></el-image>
            <div class="erp-image-editor-wrap">
                <div class="editor">
                    <el-tooltip class="item" effect="dark" content="重新加载" placement="bottom">
                        <i class="el-icon-refresh" @click="refresh"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="放大" placement="bottom">
                        <i class="el-icon-search
" @click="showBig"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="移除" placement="bottom">
                        <i class="el-icon-circle-close" @click="remove"></i>
                    </el-tooltip>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="erp-image-no-uploader">
                <el-upload :show-file-list="false" class="upload-text-wrap" :action="uploadJsonUrl" :data="otherData" :on-success="handlerSuccess">
                    <div>点击上传图片</div>
                </el-upload>
                <div class="upload-text-wrap" @click="addRemoteImage()">
                    网络图片
                </div>
            </div>
        </template>
        <div class="erp-image-title" v-if="title">
            {{title}}
        </div>
        <ImagePreview ref="imagePreview" />
        <CImageRemote @ok="imageRemoteCallback" ref="imageRemoteDialog" />
    </div>
</template>
<script>
import api from "@/api/api"
import Constants from "@/utils/constants"
import CImageRemote from "@/components/Common/CImageRemote"
export default {
    name: 'CErpImage',
    data() {
        return {
            tranlataLoading: false,
            loading: false,
            noData: true,
            otherData: {
                dir: "image",
                token: localStorage.getItem('token')
            },
            uploadJsonUrl: api.uploadJsonUrl,
            urlSrc: this.value
        }
    },
    components: {

        CImageRemote
    },
    props: {
        value: {
            type: String,
            default: ""

        },
        title: {
            type: String,
            default: ""
        },
        watchStr: {
            type: String,
            default: "",
        },
        water: {
            type: Boolean,
            default: true
        }
    },
    mounted: function() {
        
        if (this.value) {
            this.noData = false;
            this.urlSrc = this.value;
        } else {
            this.noData = true;
        }

    },
    create: function() {
        console.log("create")
    },
    watch: {
        "value": {
            handler(newval, olderval) {
                
                if (newval) {
                    this.noData = false;
                    this.urlSrc = newval;
                } else {
                    this.noData = true;
                }
            }
        }
    },
    methods: {

        remove: function() {
            this.noData = true;
            this.$emit("input", "");
        },
        refresh: function() {
            this.urlSrc = this.value + "?a=" + new Date().getTime();
        },
        showBig: function() {
            this.$refs['imagePreview'].showDialog(this.title, this.urlSrc);
        },

        addRemoteImage: function() {
            this.$refs['imageRemoteDialog'].showDialog(1);
        },
        imageRemoteCallback: function(obj) {
    
            var me = this;

            me.$emit("input", obj);
        },
        handlerSuccess: function(response, file, fileList) {

            if (response.status == 0) {
               
                setTimeout(() => {
                    this.$emit("input", response.obj);
                }, 1000);

            } else {
                this.errorMessage(response.info);
            }

        }
    }
}
</script>
<style >
.erp-image-no-uploader {
    height: 120px;
    width: 120px;
    vertical-align: top;
    border: 1px dashed #e6e6e6;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 0px 10px;
}

.erp-image-no-uploader .upload-text-wrap {
    font-size: 14px;
    line-height: 40px;

}

.erp-image-wrap {
    position: relative;
   
    margin-left: 20px;
}
.erp-image-wrap:first-child{
    margin-left: 0px;
}

.erp-image-wrap+.erp-image-wrap {}

.erp-image {
    width: 120px;
    height: 120px;
    border: 1px dashed #e2e2e2;
    box-sizing: border-box;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.erp-image-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 1px;
    right: 1px;
    position: absolute;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;

}

.erp-image-wrap:hover .erp-image-title {}
.erp-image-wrap:hover .erp-image-editor-wrap{
    
}
.erp-image-editor-wrap {
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: 118px;
    height: 20px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 4px;
    opacity: 1;
}

.erp-image-wrap .guanbi {
    position: absolute;
    top: -5px;
    left: 10px;

}

.erp-image-editor-wrap:hover {
    opacity: 1
}

.erp-image-editor-wrap .editor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 118px;
    height: 30px;
    position: absolute;
    bottom: 0;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    border-top: 1px dashed #e2e2e2;
}

.erp-image-editor-wrap .editor i {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;

    cursor: pointer;

    font-size: 14px;
    fill: #b3b3b3;

}
</style>